<template>
  <div class="user-evaluate">
    <div class="user">
      <image class="user-img" :src="data.avatar" mode="aspectFill" />
      <div class="info">
        <div class="name">{{ data.name }}</div>
        <div class="tip">
          {{ data.createTime }}
          <div class="score">{{ data.score }}</div>
        </div>
      </div>
    </div>

    <div class="content">{{ data.title }}</div>

    <div class="imgs" v-if="imgs.length > 0">
      <template v-for="(item, index) in imgs">
        <image class="img" :src="item" :key="index" v-if="index < 3" mode="aspectFill" />
      </template>
      <div class="img more" v-if="imgs.length > 3">{{ imgs.length }}+</div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({ name: 'UserEvaluate' })

const props = defineProps(['data'])

const imgs = ref([])
if (props.data?.imgUrls) {
  imgs.value = props.data.imgUrls.split(',')
}
</script>
<style lang="scss" scoped>
.user-evaluate {
  .user {
    display: flex;
    align-items: center;
    .user-img {
      width: 80rpx;
      height: 80rpx;
      background-color: var(--bgc1);
      border-radius: 50%;
    }
    .info {
      margin-left: 6rpx;
      .name {
        font-size: 27rpx;
        font-weight: 700;
        line-height: 32rpx;
        color: var(--color1);
      }
      .tip {
        margin-top: 6rpx;
        font-size: 23rpx;
        line-height: 27rpx;
        color: var(--color4);
        .score {
          position: relative;
          display: inline-block;
          height: 30rpx;
          padding: 0 10rpx;
          margin-left: 8rpx;
          font-size: 20rpx;
          font-weight: 700;
          line-height: 30rpx;
          color: #fff;
          background-color: var(--sc3);
          border-radius: 6rpx;
          &::before {
            position: absolute;
            top: 50%;
            left: -10rpx;
            display: block;
            margin-top: -6rpx;
            content: '';
            border: 6rpx solid transparent;
            border-right-color: var(--sc3);
          }
        }
      }
    }
  }

  .content {
    margin-top: 12rpx;
    font-size: 27rpx;
    line-height: 50rpx;
    color: var(--color1);
  }

  .imgs {
    padding: 10rpx 0;
    .img {
      width: 100rpx;
      height: 100rpx;
      margin-right: 10rpx;
      vertical-align: middle;
      background-color: var(--bgc1);
      border-radius: 15rpx;
    }
    .more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 27rpx;
      color: var(--color4);
      background: #edf3f7;
    }
  }
}
</style>
